<template>
  <view class="delivery-fee">
    <view class="delivery-fee-checkbox">
      <mz-list>
        <mz-list-item :show-arrow="false" title="不收外送费" @click="haveDeliveryFee=!haveDeliveryFee">
          <template v-slot:right>
            <image v-if="!haveDeliveryFee" style="width: 40rpx;height: 40rpx;" src="/static/images/other/checkmark.png" mode="widthFix" />
          </template>
        </mz-list-item>
        <mz-list-item :show-arrow="false" title="设置外送费" @click="haveDeliveryFee=!haveDeliveryFee">
          <template v-slot:right>
            <image v-if="haveDeliveryFee" style="width: 40rpx;height: 40rpx;" src="/static/images/other/checkmark.png" mode="widthFix" />
          </template>
        </mz-list-item>
      </mz-list>
    </view>

    <view v-if="haveDeliveryFee" class="delivery-fee-checkbox">
      <view class="label">
        <text>设置后，顾客单笔外送订单需收取外送费</text>
      </view>
      <mz-list>
        <mz-list-item :show-arrow="false" title="固定外送费" @click="setDeliveryType('fix')">
          <template v-slot:right>
            <image v-if="formData.type=='fix'" style="width: 40rpx;height: 40rpx;" src="/static/images/other/checkmark.png" mode="widthFix" />
          </template>
        </mz-list-item>
        <mz-list-item :show-arrow="false" title="按范围收费" @click="setDeliveryType('range')">
          <template v-slot:right>
            <image v-if="formData.type=='range'" style="width: 40rpx;height: 40rpx;" src="/static/images/other/checkmark.png" mode="widthFix" />
          </template>
        </mz-list-item>
      </mz-list>
    </view>

    <view v-if="haveDeliveryFee" class="form-box">
      <view v-if="formData.type=='fix'" class="delivery-fix-form">
        <Form ref="fixFee" :model="formData" :rules="fixFeeRules">
          <FormItem label="外送费(元)" text-align="right">
            <input v-model="formData.price" type="number" placeholder="请填写外送费，最多两位小数" @blur="handleChangePrice(formData,'price')" />
          </FormItem>
        </Form>
      </view>
      <view v-if="formData.type=='range'" class="delivery-range-form">
        <RangeFee ref="rangeFee" />
        <Tip />
      </view>
    </view>
    <SaveButton @click="submit" />
  </view>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import Form from "../../../components/public/Form/index.vue";
import FormItem from "../../../components/public/FormItem/index.vue";
import SaveButton from "../../../components/public/Button/SaveButton.vue";
import RangeFee from "./RangeFee.vue";
import Tip from "./Tip.vue";
export default {
  components: {
    Form,
    FormItem,
    SaveButton,
    RangeFee,
    Tip
  },
  data() {
    return {
      formData: {
        type: "fix", // fix range
        price: null,
        config: [
          // {
          //   min: "",
          //   max: "",
          //   price: null
          // }
        ]
      },
      haveDeliveryFee: false,
      fixFeeRules: {
        price: { required: true, message: "请填写外送费" }
      }
    };
  },
  computed: {
    ...mapState({
      deliveryData: state => state.delivery.data
    })
  },
  watch: {
    haveDeliveryFee(value) {
      if (value) {
      }
    }
  },
  created() {
    this.init();
  },
  methods: {
    ...mapActions({
      postDelivery: "postDelivery"
    }),
    ...mapMutations({
      SET_DELIVERY_DATA: "SET_DELIVERY_DATA"
    }),
    init() {
      let formData = this.$deepStr(this.deliveryData.deliveryFeeConfig);
      if (formData) this.formData = formData;
      this.haveDeliveryFee = formData ? true : false;
    },
    setDeliveryType(type) {
      this.formData.type = type;
    },
    handleChangePrice(data, key) {
      if (data[key] || data[key] === 0) {
        let value = Number(data[key]);
        data[key] = parseFloat(value.toFixed(2));
      }
    },
    submit() {
      let validate = true;
      let form = {
        deliveryFeeConfig: null
      };
      if (!this.haveDeliveryFee) {
        form.deliveryFeeConfig = null;
      } else if (this.formData.type == "range") {
        let config = this.$refs.rangeFee.getData();
        if (!config) return false;
        this.formData.config = config;
        form.deliveryFeeConfig = this.formData;
      } else {
        this.$refs.fixFee.validate(valid => {
          if (!valid) {
            validate = false;
          } else {
            form.deliveryFeeConfig = this.formData;
          }
        });
      }
      if (validate) {
        this.SET_DELIVERY_DATA(form);
        this.$back();
        // console.log("this.deliveryData", this.deliveryData);

        // this.postDelivery(this.deliveryData).then(res => {
        //   if (!res.code) this.$back();
        // });
      }
    }
  }
};
</script>

<style lang="scss">
.delivery-fee {
  padding-bottom: 100rpx;
  .delivery-fee-checkbox {
    .label {
      padding: 20rpx;
      font-size: $uni-font-size-sm;
      color: $uni-text-color-grey;
    }
  }
  .form-box {
    margin-top: 50rpx;
  }
  .delivery-range-form {
    background-color: #ffffff;
    padding: 20rpx 30rpx;
  }
}
</style>
